<template>
    <div class="sys-para">
        <div class="left">
            <div class="inner-wrap">
                <div class="search-bar">
                    <el-input v-model="filterText" placeholder="输入检索" clearable></el-input>
                </div>
                <div class="tree-box">
                    <el-tree
                        ref="tree"
                        node-key="id"
                        :data="treeData"
                        highlight-current
                        :props="defaultProps"
                        :filter-node-method="filterNode"
                        @node-click="nodeClick">
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="search-box">
                <div class="search-form">
                    <el-input placeholder="请输入名称" v-model="ruleForm.nameLike">
                        <template slot="append">
                            <el-button @click="clickQuery">搜索</el-button>
                        </template>
                    </el-input>
                    <el-button @click="resetForm">重置</el-button>
                </div>
                <div class="btn-wrap">
                    <el-button  @click="addParaType" icon="el-icon-circle-plus" type="primary" :disabled="!currentNode.id">新增</el-button>
                    <el-button  @click="mulDelete" :disabled="selection.length == 0" icon="el-icon-delete">删除
                    </el-button>
                    <el-button @click="setColumn" type="primary">
                        <i class="iconfont icon-group10copy"></i> 列设置
                    </el-button>
                    <section class="scrollBar sel-colume" v-if="selTableVisible">
                        <h3>
                            <el-checkbox v-model="checked" @change="selAll">全选</el-checkbox>
                        </h3>
                        <el-checkbox-group v-model="staffTableSel" @change="selColumnChange">
                            <div v-for="(item,index) in tableData.headerData" :key="'list'+index">
                                <el-checkbox :label="item.prop" :disabled="item.disabled">{{item.label}}</el-checkbox>
                            </div>
                        </el-checkbox-group>
                        <div class="sel-colume-button">
                            <el-button @click="cancelBtn">取消</el-button>
                            <el-button class="light-blue-btn" @click="selTableBtn">确定</el-button>
                        </div>
                    </section>
                </div>
            </div>
            <div class="table-wrap">
                <el-table 
                    :key="tableKey"
                    height="100%"
                    v-loading="loading" 
                    :data="tableData.columnData"
                    @row-dblclick='detailFun' 
                    @selection-change="selectionChange">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column prop="name" label="分类名称" min-width="160" align="left" v-if="showColumn('name')"></el-table-column>
                    <el-table-column prop="code" label="编号" width="150" align="left" v-if="showColumn('code')"></el-table-column>
                    <el-table-column prop="orderNum" label="显示顺序" width="100" v-if="showColumn('orderNum')"></el-table-column>
                    <el-table-column prop="descr" label="说明" min-width="200" v-if="showColumn('descr')"></el-table-column>
                    <el-table-column prop="statusName" label="状态" width="100" v-if="showColumn('statusName')"></el-table-column>
                    <el-table-column prop="moduName" label="所属服务" width="100" v-if="showColumn('moduName')"></el-table-column>
                    <el-table-column label="创建人" prop="crtName" width="160" v-if="showColumn('crtName')">
                        <template slot-scope="scope">
                            <template v-if="scope.row.crtNo == null">
                                {{scope.row.crtName}}
                            </template>
                            <template v-else>
                                {{scope.row.crtName}}【{{scope.row.crtNo}}】
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="crtDt" width="160" v-if="showColumn('crtDt')">
                        <template slot-scope="scope">
                            {{ scope.row.crtDt | formatDttm }}
                        </template>
                    </el-table-column>
                    <el-table-column label="修改人" prop="updName" width="160" v-if="showColumn('updName')">
                        <template slot-scope="scope">
                            <template v-if="scope.row.updNo == null">
                                {{scope.row.updName}}
                            </template>
                            <template v-else>
                                {{scope.row.updName}}【{{scope.row.updNo}}】
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" prop="updDt" width="160" v-if="showColumn('updDt')">
                        <template slot-scope="scope">
                            {{ scope.row.updDt | formatDttm }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" width="130" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editParatype(scope.row)">编辑</el-button>
                            <el-button type="text" @click="deleteFun(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination 
                    :page-sizes="[5,10,15,30,50]" 
                    :page-size="tableData.pageSize"
                    layout="sizes,total,prev,pager,next" 
                    :total="tableData.total"
                    :current-page="tableData.currentPage" 
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <new-paratype ref="type" :treeNode="treeNode" @refresh="queryParaList"></new-paratype>
        <new-para ref="new" :treeNode="treeNode" :currentNode="currentNode" @refresh="queryParaList"></new-para>
    </div>
</template>

<script>
import newParatype from './newParatype';
import newPara from './newPara';
import { columnSet } from '@/mixins/mixins';
import { queryAppList, queryParaClassPageQuery, deleteParaTypeByIds } from '../service.js';
export default {
    name: 'sysPara', // 系统参数
    props: {
        treeNode: { // 系统对象
            type: Object,
            default() {
                return {}
            }
        },
        moduCode: { // 模块code
            type: String,
            default: ''
        }
    },
    components: { newParatype, newPara },
    mixins: [ columnSet ],
    data() {
        return {
            treeData: [],
            filterText: '',
            defaultProps: {
                label: 'name',
                isLeaf: 'isLeaf'
            },
            currentNode: {},
            ruleForm: {
                nameLike: ''
            },
            tableData: {
                columns: 'orderNum',
                orders: 'ASC',
                currentPage: 1,
                pageSize: 15,
                total: 0,
                columnData: [],
                headerData: [
                    {
                        label: '名称',
                        prop: 'name',
                        isShow: true,
                        disabled: true
                    },
                    {
                        label: '编号',
                        prop: 'code',
                        isShow: true
                    },
                    {
                        label: '显示顺序',
                        prop: 'orderNum',
                        isShow: true
                    },
                    {
                        label: '说明',
                        prop: 'descr',
                        isShow: false
                    },
                    {
                        label: '状态',
                        prop: 'statusName',
                        isShow: false
                    },
                    {
                        label: '所属服务',
                        prop: 'moduName',
                        isShow: false
                    },
                    {
                        label: '创建人',
                        prop: 'crtName',
                        isShow: false
                    },
                    {
                        label: '创建时间',
                        prop: 'crtDt',
                        isShow: false
                    },
                    {
                        label: '修改人',
                        prop: 'updName',
                        isShow: false
                    },
                    {
                        label: '更新时间',
                        prop: 'updDt',
                        isShow: true
                    },
                ]
            },
            selection: [],
            loading: false,
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.initTree()
    },
    methods: {
        initTree() {
            let params = {
                typeCode: 'APPLICATION',
                sysId: this.treeNode.id,
                columns: 'orderNo',
                orders: 'ASC',
            }
            queryAppList(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(Array.isArray(data)) {
                        this.treeData = [...data];
                        if(this.treeData.length) {
                            this.nodeClick(this.treeData[0]);
                            setTimeout(() => {
                                this.$refs.tree.setCurrentKey(this.treeData[0].id);
                            }, 200)
                        }
                    }else {
                        this.treeData = [];
                    }
                }
            }).catch(error => {})
        },
        filterNode(value, data) { // 节点过滤
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        addParaType() { // 新增参数分类
            this.$refs.type.showLayout(this.currentNode);
        },
        editParatype(data) { // 修改参数分类
            this.$refs.type.showEdit(data);
        },
        nodeClick(data, node) { // 节点点击事件
            this.currentNode = data;
            this.tableData.currentPage = 1;
            this.queryParaList();
        },
        clickQuery() {
            this.tableData.currentPage = 1;
            this.queryParaList();
        },
        resetForm() {
            this.ruleForm.nameLike = '';
            this.clickQuery();
        },
        queryParaList() { // 查询参数列表
            let params = {
                columns: this.tableData.columns,
                orders: this.tableData.orders,
                startRow: this.tableData.currentPage,
                rowSize: this.tableData.pageSize,
                nameLike: this.ruleForm.nameLike,
                sysCode: this.treeNode.id,
                moduCode: this.currentNode.id,
                typeId: 'BUSI'
            }
            this.loading = true;
            queryParaClassPageQuery(params).then(res => {
                if(res.data.code == 1000) {
                    let data = res.data.data;
                    if(Array.isArray(data.data)) {
                        this.tableData.columnData = [...data.data];
                        this.tableData.total = data.total;
                    }else {
                        this.tableData.columnData = [];
                        this.tableData.total = 0;
                    }
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            })
        },
        detailFun(row) {
            this.$refs.new.showDetail(row);
        },
        mulDelete() {
            let ids = this.selection.map(item => item.id).join();
            this.deleteFun(ids);
        },
        deleteFun(ids) {
            this.$confirm('确认删除该参数分类？删除后将不能恢复！', {title: '提示', type: 'warning'}).then(() => {
                let params = {
                    ids: ids
                }
                deleteParaTypeByIds(params).then(res => {
                    if(res.data.code == 1000) {
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '删除成功！'
                        })
                        this.queryParaList();
                    }
                })
            })
        },
        selectionChange(selection) {
            this.selection = selection;
        },
        handleCurrentChange(val) {
            this.tableData.currentPage = val;
            this.queryParaList();
        },
        handleSizeChange(val) {
            this.tableData.currentPage = 1;
            this.tableData.pageSize = val;
            this.queryParaList();
        },
    }
}
</script>

<style lang="scss" scoped>
.sys-para {
    height: 100%;
    display: flex;
    .left {
        width: 240px;
        border-right: 1px solid #e4e7ed;
        padding-right: 10px;

        .inner-wrap {
            height: 100%;
            display: flex;
            flex-direction: column;
            .btn-box {
                padding: 5px;
                text-align: right;
                /deep/ {
                    .el-button--text {
                        padding: 0;
                        i {
                            font-size: 14px;
                        }
                    }
                }
            }
            .search-bar {
                margin-bottom: 5px;
            }
            .tree-box {
                flex: 1;
                background: #fff;
                overflow: auto;
                /deep/ {
                    .el-tree {
                        display: inline-block !important;
                        min-width: 100%;
                    }
                }
            }
        }
    }
    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 10px;
        overflow: hidden;
        .table-wrap {
            flex: 1;
            overflow: hidden;
        }
    }
}
</style>